import React, {PureComponent} from 'react'
import Device from './device-detail'
import Bar from './bar'
import Log from './log'
import Pie from '../chart/base-pie'
import {connect} from 'react-redux'
import {millToString} from '../../util/util'

class DeviceInfo extends PureComponent {

    render() {

        const {data} = this.props
        const {logs = [], currentSingleBoard = {}, data: param = {}} = data

        const fZFeederColumn = param.FZFeederColumn || []
        const fzFeederFisionfailures = param.FzFeederFisionfailures || []

        const pieData = {
            title: '设备今日运行状况',
            option: {},
            data: [{
                value: 100,
                name: '正常'
            }, {
                value: 0,
                name: '未完成'
            }, {
                value: 0,
                name: '故障'
            }]
        }

        const pData = {
            title: '抛料类型',
            option: {},
            data: fzFeederFisionfailures.map(f => {
                return {
                    value: f.itemPercent,
                    name: f.itemName
                }
            })
        }


        const boardData = {
            '程序名': currentSingleBoard.programName,
            '任务令': currentSingleBoard.taskId,
            '编码': currentSingleBoard.encode,
            '加工时间': millToString(currentSingleBoard.processDate),
        }

        const pllData = {
            title: '当前抛料率TOP10',
            xAxisData: fZFeederColumn.map(f => f.Xvalue),
            yAxisData: fZFeederColumn.map(f => f.throwing_rate)
        }
        return (
            <Device src="../images/business/reflow.png" data={data} currentSingleBoard={boardData} pieData={pieData}>
                <div className="device-res">
                    <p>单板条码：0230-24i0-930489u9834</p>
                    <p>测试结果：pass</p>
                    <div className="device-res-col12">
                        <Bar data={pllData}/>
                    </div>
                    <div className="device-res-col6">
                        <Pie config={pData}/>
                    </div>
                    <div className="device-res-col6">
                        <Log title="设备运行日志" logs={logs}/>
                    </div>
                </div>
            </Device>
        )
    }

}
function mapStoreToProps({deviceMetrics}) {
    return {
        data: deviceMetrics.get('clip').toJS()
    }
}

export default connect(mapStoreToProps)(DeviceInfo)

